2018-10-21-22-22-01

响应式web设计

  1. max-width: 100%和width:100%的区别，max-width会考虑自身的宽度，只有容器比图片宽度笑才会缩放占满可用空间，而width无论什么情况下都会占满可用空间。

  2. 断点：就是某个宽度临界点，跨过这个点布局就会发生显著变化。断点应该由内容和设计本身决定而不是那些流行的设备！

  3. 媒体查询：根据设备的能力应用特定的css样式。

  4. 规范批准流程：WD【working draft】,CR【candidate recommendation 候选推荐】,PR【proposed recommendation 建议推荐】,REC【recommendation 推荐标准】.

  5. 在link标签中使用媒体查询，media=”screen and (min-width=550px)”,通过and将多个媒体查询串在一起。

  6. 在@import使用媒体查询，@import url(style.css) screen and (max-width:550px);使用@import会增加HTTP请求英雄加载速度。

  7. 在CSS中使用媒体查询，@media screen and (max-device-width: 400px){style},默认是针对所有设备，因此可以省略screen。

  8. 媒体查询可以测试的特性：width（最常用了）、height、device-width（设备屏幕宽度，废弃）、device-height（设备屏幕高度）、orientation（设备方向）、aspect-ratio（视口宽高比）、resolution（分辨路）。都可以加上min和max前缀指定范围。

  9. 所有的CSS文件都会被下载下来，只是下载下来不必立即应用，优先级比较低而已。

  10. 阻塞渲染是指该资源是否会暂停浏览器的首次页面渲染。

  11. 视口的meta标签：<meta name="viewport" content="initial-scale=1.0,width=device-width">

  12. 区块转换成弹性比例大小：目标/上下文。

  13. 媒体查询：only【only兼容老浏览器】，and，or，not

    Flexbox布局

  14. Flexbox，有的需要前缀。自动加前缀，autoprefixer。

  15. 魔法属性，如果指定了flex布局，margin-left,margin-right指定为auto值的时，它让最后一项用上改侧所有可用的外边距。

  16. flex-direction,flex-wrap,flex-flow

  17. inline-flex，行内伸缩，比如a标签，可以在行内进行伸缩而不用变成块级。

  18. Flexbox的方向：align-items、align-self（可以覆盖align-items）、justify-content、

  19. flex的默认值：0 1 auto；表示宽度由里面的内容自动确定。
    2018-10-21-14-49-11

  20. 使用列+min-height=100%（HTML,BODY）可以实现页脚粘附。

  21. 把主内容放在页面的开头是个聪明的做法,结合使用order，甚至可以模仿所谓的“圣杯布局”

响应式图片

  1. 根据分辨率切换不同分辨率的图片:通过srcset属性+size属性联合切换。（少见到，忽略）

  2. 根据不同的视口大小使用不同的图片：picture元素，picture元素只是一个容器，需要使用source(srcset)配合img使用。在source中可以使用media媒体查询属性。

  3. 图片格式的替换，type + srcset，结合使用。type指明优先使用的图片格式image/后缀

HTML5与响应式设计

  1. 可以把多个元素放到a标签里

  2. 腻子脚本：用腻子可以填补墙上的坑洼不平来比喻填补老版本浏览器的功能缺失。

  3. HTML5响应式视频：删除width属性，添加 max-width:100%;height:auto;

  4. 学习了添加B站的视频

  5. 离线应用，localstorage，service workers

CSS3新特性

  1. 响应式多列布局：column-count、cloumn-gap、column-rule、column-width

  2. 断字：word-wrap: break-word;

  3. 截断文本：text-overflow[ellipsis],width,white-space;

  4. CSS分支,特性查询 @support (attrub: value) ，使用 Modernizr进行特性检测。

  5. 属性选择符，属性是当做一个字符串。比如 src=”1.jpg 2.jpg”,开头是1.jpg,不能以2.jpg开头去查找属性。

  6. CSS calc(),可以使用CSS calc方法进行简单的计算。比如计算父元素的宽度的一半减去10像素。.thing{width: calc(50%-10px)}

  7. CSS4选择器，工作草案，只是了解即可。比如：a:has(p){width:100px;},这个规则可以给一个包含p段落的a标签设置宽度是100px.

  8. 相对视口的长度【相对单位】： vw vh vmin vmax vmax。 可以使用这些相对单位。
    vw视口宽度， 1vw = 1% 视口宽度，
    vh视口高度， 1vh = 1% 视口高度
    vmin视口中的最小值，等于vw或vh中较小的值的1%
    vmax视口中的最大值，等于vm或vh中最大的值的1%

  9. HSL, 色相，饱和度，亮度 hue saturation lightless
    2018-10-22-17-37-20

  10. HSLA RGBA 不透明度 ， 0是透明 1是不透明

  11. opacity是不同明度，他与上面的区别在于：opacity会影响整个元素，而上面的只会影响元素特定的方面，比如背景。

  12. css计数器

  13. var(),CSS自定义属性和变量

CSS3高级技术

  1. 文字阴影 text-shadow: x y 模糊程度 颜色【通过逗号分隔，可以添加多个阴影效果】

  2. 盒阴影 box-shadow: 内阴影 x y 模糊程度 阴影尺寸 颜色【同理，通过逗号分隔，可以添加多重阴影效果】

  3. 背景渐变：background: linear-gradient(方向，颜色1，颜色2)，为了兼容不支持渐变效果的浏览器，可以定义一个背景颜色。

  4. 色标：定义颜色什么时候开始和结束，用于把渐变中的某个点设定为特定颜色。颜色 颜色位置

  5. 通过高分辨率的媒体查询加载高分辨率背景图片。

  6. CSS滤镜：
    drop-shadow【跟box-shadow有相同的参数，drop-shadow可以给元素或图片非透明区域添加投影】
    blue【模糊背景，px】
    brightness【高亮，全黑0-1正常，大于1则是更亮】
    contrast【对比度，跟上同理】
    grayscale【灰度化，跟上同理，但不能超过1，1表示完全灰度化】
    invert【元素反色，跟上同理】
    opacity【不透明度，跟上同理】
    ..CCS滤镜是基于SVG滤镜

  7. 可以同时使用多个滤镜，不同的滤镜只需要用空格分开

SVG与响应式设计

  1. 矢量图是使用相对点来保存数据，可以缩放到任意大小而不会损失清晰度。

  2. 视口：描述在设备上能够观看内容的面积。

  3. 视框：定义了SVG中所有形状都需要遵循的坐标系。viewbox = x轴的位置 y轴的位置 坐标系的宽度 坐标系的高度

  4. title, desc提高SVG文档的可读性

  5. defs标签，用于存储所有可以复用的元素定义的地方，如梯度，符号、路径等

  6. g元素，把其他元素组合起来

  7. SVG形状，有现成形状： path rect circle ellipse line polyline polygon

  8. SVG路径，由任意数量的连接点组成的，可以自由创造你想要的形状。

  9. 使用图像编辑器生成SVG。

  10. 不需要自己完全做出一个SVG，网络很多资源。

在web页面中插入SVG

  1. img标签，SVG能做的和其他插入的图片差不多。

  2. object标签，object标签是W3C推荐用于装载非HTML内容的容器。可以使用这个标签插入SVG。

    1
    2
    3
    <object data="img/svgfile.svg" type="image/svg+xml">
        <span class="fassback-info">你的浏览器不支持SVG</span>
    </object>

type是内容弄的mime类型。采用这种插入方式可以被JavaScript访问。而且能在浏览器不支持的时候做出简单的反馈。

  1. background-image：url(“img/filename.svg”);如果对SVG的需要只是静态背景图片或者图标，那么尽量通过背景图像的方式插入SVG文件。

  2. data URI，统一资源标识符，用于引入外部资源，如图像。
    优点：
    访问外部资源很麻烦或者受限
    图片是在服务器端用程序动态生成，每个用户显示都不一样
    图片体积太小，占用一个HTTP请求不是很值得，能节省一次网络请求

缺点：
Base64编码的数据体积通常是原数据的体积4/3，也就是Data URL形式的图片会比二进制格式的图片体积大1/3。
Data URL形式的图片不会被浏览器缓存，这意味着每次访问这样页面时都被下载一次。这是一个使用效率方面的问题——尤其当这个图片被整个网站大量使用的时候。【CSS中background-image可以解决这个问题，浏览器都会积极的缓存CSS文件来提高页面加载效率】

格式：
data:[<mediatype>][;base64],<data>[base64 声明 data 使用 base64编码而已]

  1. base64编码：base64是一种基于64个可打印字符来表示二进制数据的表示方法。

  2. 对SVG编码尽量不要base64编码，因为base64编码对浏览器解码本身就是一种损耗，SVG转换成base64反而会变大！推荐使用SVGO压缩图片或者使用dataURI而不使用base64。

  3. 内联SVG：最好的使用SVG方式是当做背景图片插入。但是如果需要为SVG加上动画效果或者使用JavaScript插入数据，最好还是把SVG内联到HTML上。

  4. 使用defs+symbol定义好符号，并且使用display:none，只是使用SVG作为容器放置我们的图形对象的符号。

  5. use元素，使用定义好的图形对象，通过xlink属性来选择引入的对象。use元素可以复用所有的SVG内容，梯度，形状，符号等

  6. 改变SVG颜色，在需要多个版本的图标时非常有用。使用CSS的fill属性可以改变SVG的填充颜色。

  7. 创造双色图标，在指定的path中设定fill属性为currentColor变量，在CSS中的color属性设定这个元素的颜色，没有设置fill属性的其他路径将会使用css中的fill值。

    1
    .icon-left-right{color:#ccc;fill:#f90;}

  8. 以上这种方式内联SVG，每个页面都需要添加庞大的符号集合，那是非常烦人的。而且浏览器无法对SVG代码进行缓存，这是影响性能的。

  9. 可以复用外部图形对象资源<use xlink:href="defs.svg#icon-drag-left-right"></use>，这里表示使用外部的defs.svg然后确定文件中我们想要使用的符号ID是icon-drag-left-right。这样可以让资源和其他外部图像一样可以被缓存。

  10. 浏览器兼容性问题：IE不能引用外部SVG资源，IE不允许通过CSS为SVG添加动画。

  11. SMIL动画，SMIL，同步多媒体集成语言【IE、EDGE都不支持】，使用animate标签。

  12. 使用CSS为SVG添加样式【只支持内联或者object标签插入的情况】，使用CSS为SVG添加动画,使用内联样式需要放在dfs中【IE不支持,edge支持,】

  13. 使用JavaScript添加SVG动画，可以添加交互功能，支持IE以及同步时间。【用JavaScript控制SVG，只能在SVG是内联或者OBJECT标签引入的时候才有效】

  14. 使用GreenSock添加SVG动画

  15. 优化SVG，去掉不需要的元素.SVGO,SVGOMG.

  16. SVG滤镜技术：CSS滤镜技术是基于SVG的，但CSS滤镜在IE系列都不支持，但我们可以使用SVG创建滤镜。

  17. SVG可以进行媒体查询.

  18. SVG总结：
    1.对于不使用SVG动画的，最好使用图片精灵或者dataURI。
    2.在项目中插入SVG中，尽可能只用一种调用方式，否则会很乱
    3.对于简单的动画，使用css【没必要在所有浏览器都表现一样】；对于复杂的可以使用JS库。

  19. 为什么要用SVG

  20. 体积小，加载更快
  21. SEO更好，因为用XML编写，可以使用title，desc等对图片进行描述
  22. 具备矢量功能，在任何高清设备都很高清

CSS3过渡、变形和动画

  1. 首先理解一点，CSS实现动画效果需要三个主要属性：transition过渡，transform变形，animation动画。但是真正很动画相关的是transition和animation。transform只是让我们改变元素的外观。

过渡

  1. 理解一点：过渡声明是应用在初始状态而不是结束状态上。

  2. 过渡相关属性：
    transition-property：要过渡的css属性的名字【all可以过渡所有可以过渡的属性，多个属性使用逗号相隔】
    transition-duration：定义过渡的时长【单位是s】
    transition-timing-function：定义过渡期间的速度变化【ease、linear、ease-in、ease-out、ease-in-out或者cubic-bezier】
    transition-delay：过渡开始前的延迟时间。【单位s】
    简写属性transition：all 1s ease 0s;

  3. 定义那些你真的需要的过渡属性，定义all会增加浏览器的负担。

  4. 可以在不同时间段内过渡不同属性

  5. 理解速度函数：其实他们都是定义好的贝塞尔曲线，本质就是缓动函数。过渡效果应该尽可能快，默认过渡效果ease就是最好的。

  6. 有趣的过渡：*{transition: all 1s}，这样可以让页面内所有的元素都有过渡效果。包括媒体查询，窗口大小改变，页面排列方式改变等等。。

变形

  1. CSS3变形（transformation）包含了2种变形：2D变形、3D变形。

2D变形

scale：放大和缩小
translate：在屏幕上移动元素，上下左右
rotate：按照一定的角度旋转元素（单位为度）
skew：沿X或者Y轴对元素进行斜切【二维坐标系x，y调换即可】
martix：以像素精度来控制变形效果【所谓的矩阵，能让其他变形组合成单个声明】
变形是在文档流外发生的，一个变形的元素不影响文档附近的任何元素的位置。

  1. 可以使用translate实现居中绝对定位元素

  2. transform-origin属性：变形原点，默认是元素中心。【SVG的是左上角】

3D变形

  1. perspective属性：设置用户视点到3D场景的距离。【可以省略】

  2. transform-style: preserve-3d

  3. backface-visibility:hidden;【在真正变形的元素中添加】

  4. transform3d属性：rotate3d(),scale3d(),translate3d();

  5. 使用变形实现渐进增强：在制作交互模式的时候，最有用的方法是从最低级的功能开始，逐步增强。【把这个作为制作交互网页的原则】

动画

  1. CSS3动画由两部分组成：首先是关键帧声明，然后是在动画属性中使用这个关键帧声明。

  2. 关键帧选择器：百分比。【或者是from和to，但支持不是很好，最好使用百分比】

  3. 动画属性：

animation-name:
animation-duration:
animation-delay:
animation-interation-count:[infinite]
animation-play-state:[running,paused]
animation-play-mode:[both,forwards,backwards,none]
animation-direction:[normal,reverse,alternate,alternatereverse]
``

viewport视口

  1. 布局视口：虚拟视口，把网页先虚拟出来，不会改变的
  2. 可视视口：手机的浏览器窗口，会随机着缩放而改变，没法控制

  3. 理想视口：就是布局视口在一个设备上的最佳尺寸，为构建手机浏览器优化的页面而添加的。content="width=device-width"

  4. 禁止缩放：user-scalable=no maximum-scale=1.0 minimum-scale=1.0

网站开发前的工作

  1. 需求调研，UI设计、评审，原型设计
    2018-10-26-22-14-54

RWD实践原则

  1. 渐进增加，progressive enhancement【先在简单的基本效果，逐渐增加好的功能，让老的浏览器能用，让新的浏览器更好用，可用性优先，反人类】

  2. 优雅降级，graceful degradation【先做漂亮。再对低版本进行修修补补，这个更符合我们的开发原则！】

  3. 断点选择
    2018-10-26-23-00-15

  4. 约定优于配置:convention over configuration，约定代码结构或命名规范来减少配置数量。

  5. 可以先针对小屏幕设计，也可以先针对大屏幕设计，看网站需求，没必要一定移动端优先。

网站目录结构

  1. humans.txt【网站建设者的相关信息】,robots.txt【爬虫能识别的文件，设置网站相关的能被搜索引擎爬取的信息】

  2. .editorconfig【统一代码工具文件，告诉编辑器，如何格式化代码。】

  3. .gitignore【git系统忽略文件】

  4. LICENSE.txt【版权协议信息】

  5. README.md【项目简介、使用方式、相关链接】

  6. CHANGLOG.md【项目每个版本的更新，说明版本号、更新内容、修复了哪些问题】

代码实际开发

  1. http-equiv="x-ua-compatible" content="ie=edge",设置IE的文档兼容模式，表示使用最新IE浏览器模式渲染页面。

  2. IE条件注释

  3. 一般使用class定义样式，id用于js快速的区别和获取元素。class用中横线分隔，id驼峰命名。

单位

  1. px，em，rem【em相对长度单位，参考父元素的字体大小，可继承。容易混乱，继承父元素。rem相对参照物是HTML根元素，相对参照固定不变，比较好计算。】

媒体查询

  1. 使用的相对单位是相对于最高级别的默认值，也就是相对浏览器的默认值，比如：1em = 就是1倍的浏览器字体。

响应式图片

  1. 加载于用户设备相匹配的小图片，即快速又不会影响用户体验。

  2. 响应式图片包括两点:图片的排版和布局，根据设备大小加载不同的图片。

  3. 实现方式：JS或服务端、srcset、srcset配合sizes、picture、svg

meta标签中的http-equiv、name、content属性

  1. http-equiv,把content属性关联到HTTP头部。【x-ua-compatible，兼容IE8】

  2. name，把content属性关联到一个名称。【content=edge，使用edge的模式去渲染】

  3. content,定义与http-equiv或name属性相关的元信息。

响应式框架

Semantic UI，Foundation，Bootstrap，PureCSS